<!DOCTYPE html>
<html>
<head>
    <title>Particle Decay Diagram</title>
</head>
<body>
<canvas id="decayCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById('decayCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw a line with an arrowhead
    function drawArrow(fromX, fromY, toX, toY) {
        const headLength = 15; // length of head in pixels
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        
        ctx.beginPath();
        // Draw line
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        
        // Draw arrowhead
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        
        ctx.stroke();
    }
    
    // Clear canvas
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Set drawing style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;

    // Define coordinates for the decay vertex
    const vertexX = 230;
    const vertexY = 175;

    // Draw the main horizontal line for the eta' particle
    ctx.beginPath();
    ctx.moveTo(30, vertexY);
    ctx.lineTo(470, vertexY);
    ctx.stroke();

    // Draw labels and velocity vector for the incoming particle
    ctx.font = "italic 36px 'Times New Roman'";
    // Using Greek letter Nu (ν) as it resembles the handwritten character for velocity
    ctx.fillText("ν", 130, 155); 
    // Using Greek letter Eta (η) with a prime
    ctx.fillText("η'", 130, 225); 

    // Draw velocity arrow for ν
    ctx.beginPath();
    const v_arrow_y = 145;
    const v_arrow_start_x = 155;
    const v_arrow_end_x = 200;
    const v_arrowHead = 8;
    ctx.moveTo(v_arrow_start_x, v_arrow_y);
    ctx.lineTo(v_arrow_end_x, v_arrow_y);
    ctx.moveTo(v_arrow_end_x, v_arrow_y);
    ctx.lineTo(v_arrow_end_x - v_arrowHead, v_arrow_y - v_arrowHead / 2);
    ctx.moveTo(v_arrow_end_x, v_arrow_y);
    ctx.lineTo(v_arrow_end_x - v_arrowHead, v_arrow_y + v_arrowHead / 2);
    ctx.stroke();
    
    // Define outgoing particle paths
    const gammaAngleRad = -28 * Math.PI / 180; // Angle for gamma (photon) in radians
    const rhoAngleRad = 32 * Math.PI / 180;   // Angle for rho meson in radians
    const gammaPathLength = 180;
    const rhoPathLength = 170;

    const gammaEndX = vertexX + gammaPathLength * Math.cos(gammaAngleRad);
    const gammaEndY = vertexY + gammaPathLength * Math.sin(gammaAngleRad);
    const rhoEndX = vertexX + rhoPathLength * Math.cos(rhoAngleRad);
    const rhoEndY = vertexY + rhoPathLength * Math.sin(rhoAngleRad);

    // Draw outgoing particle paths with arrows
    drawArrow(vertexX, vertexY, gammaEndX, gammaEndY);
    drawArrow(vertexX, vertexY, rhoEndX, rhoEndY);

    // Draw labels for outgoing particles
    ctx.font = "36px 'Times New Roman'";
    // Using capital Gamma (Γ) for photon as in the image
    ctx.fillText("Γ", 380, 100); 

    ctx.font = "italic 36px 'Times New Roman'";
    // Using Greek letter Rho (ρ)
    ctx.fillText("ρ", 340, 280); 
    ctx.font = "24px 'Times New Roman'";
    // Superscript '0' for rho meson
    ctx.fillText("0", 358, 272); 

    // Draw the angle arc and label for theta
    const arcRadius = 60;
    ctx.beginPath();
    ctx.arc(vertexX, vertexY, arcRadius, 0, gammaAngleRad, true);
    ctx.stroke();
    
    ctx.font = "italic 36px 'Times New Roman'";
    // Using Greek letter Theta (θ)
    ctx.fillText("θ", 295, 158); 

    // Draw the figure caption
    ctx.font = "24px 'Times New Roman'";
    ctx.textAlign = "center";
    ctx.fillText("Fig. 4.5", canvas.width / 2, canvas.height - 15);

</script>
</body>
</html>